<script lang='ts' setup>
import draggableComponent from 'vue3-draggable-next';
interface Props {
  itemKey: string
  list: unknown[]
  clone?: (e: any) => void
}
const props = defineProps<Props>()
</script>

<template>
  <draggable-component class="list-group" :list="list" :sort="false" :clone="clone"
    :group="{ name: 'list', pull: 'clone', put: false }" :animation="0" :item-key="itemKey" ghost-class="drag-item-ghost"
    force-fallback>
    <template #item="{ element, index }">
      <div class="item-type">{{ element.label }}</div>
    </template>
  </draggable-component>
</template>

<style lang='scss' scoped>
.item-type {
  background-color: #f2f2f2;
  border: #eee 1px solid;
  color: #333;
  font-size: 16px;
  padding: 12px 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin: 8px 0;
  cursor: move;
  text-align: center;
}

.item-type:hover {
  border: lightseagreen 1px dashed;
}
</style>